import React, {Component} from 'react';
import './TotoList.css'
import Header from "./Header/Header";
import List from "./List/List";
import Footer from "./Footer/Footer";

class TotoList extends Component {
    // 状态在哪，操作状态方法也定义对应的位置
    state = {
        todos: [
            {id: '1', name: '吃饭', done: true},
            {id: '2', name: '打球', done: false},
            {id: '3', name: '散步', done: false}
        ]
    };

    // 用户添加todo对象，实质字组件向父组件传值
    addTodo = (todoObj) => {
        const {todos} = this.state
        this.setState({todos: [todoObj, ...todos]});
    }

    // 用于修改
    updateTodo = (id, done) => {
        const {todos} = this.state
        const newTodos = todos.map((d) => {
            if (d.id === id) return {...d, done}
            else return d
        });
        this.setState({todos: newTodos});
    }

    // 删除元素
    deleteTodo = (id) => {
        const {todos} = this.state
        const newTodos = todos.filter(todo => {
            return todo.id !== id
        })
        this.setState({todos: newTodos});
    }

    // 清除所以状态为已经完成的数据
    deleteTodoDone = () => {
        const {todos} = this.state
        const newTodos = todos.filter(todo => !todo.done)
        this.setState({todos: newTodos})
    }

    // 是否全选
    checkAllTodo = (done) => {
        const {todos} = this.state
        const newTodos = todos.map(d => {
            return {...d, done}
        })
        this.setState({todos: newTodos});
    }

    render() {
        const {todos} = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} deleteTodoDone={this.deleteTodoDone}/>
                </div>
            </div>
        );
    }

}

export default TotoList;